<template>
	<view class="t-content">
		<!-- swiper示例 -->
		<swiper v-if="swiperList && swiperList.length>0" class="t-swiper" :duration="duration" :current="current"
			@animationfinish="itemChange">
			<swiper-item v-for="(item,index) in swiperList" :key="index">
				<!-- 这里是你可以任意定义的内容哦，例如答题类、视频轮播类... //开始 -->
				<view class="t-item-con t-wh-100p" :style="{'background-image': 'url('+item.bgImg+')'}">
					<view class="t-item-title">{{item.title}}</view>
					<text class="t-item-desc">{{item.desc}}</text>
				</view>
				<!-- 这里是你可以任意定义的内容哦，例如答题类、视频轮播类... //结束 -->
			</swiper-item>
		</swiper>
		<!-- 下面这个是为了演示快速跳转到某一个item -->
		<view class="t-leap-desc"> 
			注：上面swiper中共10000个带图片的item，点击下方序号快速跳转：
		</view>
		<view class="t-leap">
			<view @click="leapTo" data-num="9">9</view>
			<view @click="leapTo" data-num="99">99</view>
			<view @click="leapTo" data-num="999">999</view>
			<view @click="leapTo" data-num="1999">1999</view>
			<view @click="leapTo" data-num="2999">2999</view>
			<view @click="leapTo" data-num="3999">3999</view>
			<view @click="leapTo" data-num="4999">4999</view>
			<view @click="leapTo" data-num="5999">5999</view>
			<view @click="leapTo" data-num="6999">6999</view>
			<view @click="leapTo" data-num="7999">7999</view>
			<view @click="leapTo" data-num="8999">8999</view>
			<view @click="leapTo" data-num="9999">9999</view>
		</view>
	</view>
</template>

<script> 
	//这里引入封装的工具类方法
	import { initSwiper, leapToItem, changeSwiperItem ,defaultParams } from '@/common/kevy-enhanced-swiper-1.0.js';
	//list -- swiper所有数据的存放列表
	//duration -- 初始化设置的过渡时间
	var { list, duration } = defaultParams;
	//测试图片背景，这块为了测试带图片且数据量大也不存在性能问题
	const bgImg = 'https://img-blog.csdnimg.cn/140a01b8ad3f46bb9b970fdd85433ebe.png';
	export default {
		data() {
			return {
				swiperList: [], //swiper实际列表，里面放的swiper-item数量为1-3个
				current: 0, //swiper实际列表（swiperList）中当前可以看到的那个swiper-item对应的下标，从0开始
				duration: duration, //swipper-item元素切换动画过渡时间
				currItemNo: 1 ,//当前显示的swiper-item在所有数据的存放列表（list）中的序号，例如总数量list里共10000条数据，currItemNo=150是指当前显示的是第150条数据
			}
		},
		onLoad() {
			//这里去请求所有数据，如果接口是分页的就多请求几次拿到所有数据，不存在性能问题
			// uni.request({
			// ...请求逻辑
			// () => { list = res.data.list }
			// })
			//这里模拟请求到了所有数据，例如10000条，然后放到list数组里
			for (let i = 0; i < 10000; i++) {
				list.push({
					bgImg: bgImg,
					title: "[第" + (i + 1) + "个元素]我是一个无限制数量高性能的swiper",
					desc: "A. [第" + (i + 1) +
						"个元素]实现原理：\n\nB. swiper里永远最多只放3个元素，\n\nC. 在swiper切换时根据原来的下标计算新的需要显示的item对应下标，\n\nD. 然后组装好新的最多3个item数据渲染到页面"
				});
			}
			//请求到所有数据后放到list变量里后，初始化swiper
			initSwiper(this, list, () => {
				//这里是初始化完后的回调，你可以写自己的逻辑了，例如拿到当前swiper-item
				console.log(this.swiperList[this.current]);
			});
		},
		methods: {
			/**
			 * swiper切换事件，这里监听的是切换完成动画事件
			 */
			itemChange(e) {
				changeSwiperItem(this, Number(e.detail.current), list, duration, () => {
					//切换完成
					//这里可以写自己的逻辑啦，例如去判断当前item是否收藏...
					console.log("切换完成，当前显示的是===", this.swiperList[this.current].title)
				});
			},
			/**
			 * 跳到第n个item数据，n为序号从1开始
			 */
			leapTo(e) {
				leapToItem(this, Number(e.currentTarget.dataset.num), list, duration, () => {
					//这里是跳完之后，此时页面已经显示第n个item了，
					//你可以在这里写自己的逻辑了，例如判断当前item是否收藏，是否错题...
					console.log("已经跳转到第" + Number(e.currentTarget.dataset.num) + "个item啦");
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.t-content {
		background-color: #f7f7f7;
		min-height: 100vh;
	}

	.t-h-100p {
		height: 100%;
	}
	
	.t-hover{
		opacity: 0.7;
	}

	.t-w-100p {
		width: 100%;
	}

	.t-wh-100p {
		width: 100%;
		height: 100%;
	}

	.t-swiper {
		width: 100%;
		box-sizing: border-box;
		height: 500rpx;
	}

	.t-item-con {
		background-size: 100% 100%;
		background-repeat: no-repeat;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.t-item-title {
		font-size: 36rpx;
		color: #ffffff;
		font-weight: bold;
		text-align: justify;
	}

	.t-item-desc {
		font-size: 28rpx;
		color: #ffffff;
		margin-top: 30rpx;
		text-align: justify;
	}
	
	.t-leap-desc {
		font-size: 28rpx;
		width: 690rpx;
		margin: 60rpx auto 0rpx;
		color: black;
	}

	.t-leap {
		width: 663rpx;
		height: 100rpx;
		margin: 0 auto;
		box-sizing: border-box;
		padding: 15rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
	}

	.t-leap view {
		font-size: 24rpx;
		color: #fff;
		padding: 15rpx;
		background: #42b983;
		border-radius: 10rpx;
		width: 57rpx;
		height: 30rpx;
		text-align: center;
		line-height: 30rpx;
		margin: 10rpx;
	}
</style>
